<template>
  <el-col v-if="show" :span="12">
    <div style="height: 290px;padding: 13px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);border-radius: 5px">
      <div ref="chartIotCount" style="height: 286px;width: 100%" />
    </div>
  </el-col>
</template>

<script>
import { listIotCount } from '@/api/iot/iotMessageCountApi'
import { getUserId } from '@/util/storage'
import * as echarts from 'echarts'
import resize from '@/components/Mixins/resize'
export default {
  name: 'IotCountMinute',
  mixins: [resize],
  data() {
    return {
      show: false,
      chart: null,
      deviceSendNum: [],
      deviceWarnNum: [],
      serverSendNum: [],
      deviceStatusNum: [],
      unKnowNum: [],
      dateList: [],
      startDate: '',
      userId: getUserId(),
      timer: null
    }
  },
  mounted() {
    this.listIotCount()
    if (this.timer == null) {
      const that = this
      this.timer = setInterval(() => {
        that.listIotCount()
        console.log('刷新分钟统计')
      }, 60 * 1000)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    clearInterval(this.timer)
  },
  methods: {
    listIotCount() {
      this.startDate = new Date().getTime() - 5 * 60 * 1000
      listIotCount({
        userId: this.userId,
        startDate: Math.round(this.startDate / 1000)
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          if (!this.show && data.length > 0) {
            this.show = true
            this.$nextTick(() => {
              this.chart = echarts.init(this.$refs.chartIotCount)
              this.showChart(data)
            })
          } else {
            this.showChart(data)
          }
        }
      })
    },
    showChart(data) {
      if (data == null) {
        return
      }
      const size = data.length
      if (size < 1) {
        return
      }

      /**
       * 历史对比
       */
      this.dateList = []
      this.deviceSendNum = []
      this.deviceWarnNum = []
      this.serverSendNum = []
      this.deviceStatusNum = []
      this.unKnowNum = []
      for (const i in data) {
        this.dateList.push(data[i].date.split(' ')[1].split('.')[0])
        this.deviceSendNum.push(data[i].deviceSendNum)
        this.deviceWarnNum.push(data[i].deviceWarnNum)
        this.serverSendNum.push(data[i].serverSendNum)
        this.deviceStatusNum.push(data[i].deviceStatusNum)
        this.unKnowNum.push(data[i].unKnowNum)
      }
      this.initChart()
    },
    initChart() {

      this.chart.setOption({
        grid: {
          left: '0px',
          right: '0px',
          top: '25px',
          bottom: '40px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: this.dateList
          }
        ],
        yAxis: [
          {
            show: false
          }
        ],
        legend: {
          data: [
            this.$t('send'),
            this.$t('status'),
            this.$t('upload'),
            this.$t('warn'),
            this.$t('unKnow')
          ]
        },
        series: [
          {
            name: this.$t('send'),
            type: 'bar',
            data: this.serverSendNum,
            areaStyle: {},
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            label: {
              show: true,
              position: 'top', // 位置
              color: '#1CD8A8',
              fontSize: 10,
              distance: 30 // 距离
            } // 柱子上方的数值
          },
          {
            name: this.$t('status'),
            type: 'bar',
            data: this.deviceStatusNum,
            areaStyle: {},
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            label: {
              show: true,
              position: 'top', // 位置
              color: '#1CD8A8',
              fontSize: 10,
              distance: 30 // 距离
            } // 柱子上方的数值
          },
          {
            name: this.$t('upload'),
            type: 'bar',
            data: this.deviceSendNum,
            areaStyle: {},
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            label: {
              show: true,
              position: 'top', // 位置
              color: '#1CD8A8',
              fontSize: 10
              // distance: 30 // 距离
            } // 柱子上方的数值
          },
          {
            name: this.$t('device')+this.$t('warn'),
            type: 'bar',
            data: this.deviceWarnNum,
            areaStyle: {},
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            label: {
              show: true,
              position: 'top', // 位置
              color: '#d85047',
              fontSize: 10
              // distance: 30 // 距离
            } // 柱子上方的数值
          },
          {
            name: this.$t('unKnow'),
            type: 'bar',
            data: this.unKnowNum,
            areaStyle: {},
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            label: {
              show: true,
              position: 'top', // 位置
              color: '#1CD8A8',
              fontSize: 10,
              distance: 30 // 距离
            } // 柱子上方的数值
          }
        ]
      })
    }
  }
}
</script>
